<!--卡牌游戏-->
<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt7')"></topboxVue>
		<view class="cardbox">
			<view class="cardbox-main mb10">
				<view class="f28 bj_center mb50">
					<text>{{$t('card.tit1')}}</text>
					<text class="f48 cy fwb por">
						<text>{{$t('menu.$')}} {{data.max_prize}}</text>
						<image src="/static/hd/tag.png" class="cardbox-main-tag" mode="widthFix"></image>
					</text>
					<text>{{$t('card.tit2')}}</text>
				</view>
				<view class="cardbox-main-win-box">
					<block v-for="(item,i) in klist" :key="i">
						<view class="cardbox-main-item cardbox-main-win" v-if="item.ifend==3">
							<image :src="'/static/hd/'+item.k+'0.png'" class="cardbox-main-win-img">
							</image>
							<view class="cardbox-main-win-txt">
								{{$t("menu.$")}} {{item.num}}
							</view>
						</view>
						<image :src="'/static/hd/'+item.k+(item.ifend==2?'.gif':'.png')" v-else
							class="cardbox-main-item" :class="item.ifop ? '': 'cardbox-main-op6'" @click="fp(item)">
						</image>


					</block>

				</view>
			</view>
			<view class="f28 mb20">
				{{$t('card.tit3')}}
			</view>
			<view class="cardbox-jdt mb20">
				<view class="cardbox-jdt-mt"
					:style="'width:'+(user.user?.recharge_all/data.recharge_total * 100 > 100 ? 100 : user.user?.recharge_all/data.recharge_total)+'%'">
				</view>
			</view>
			<view class="f28 mb20 bj_between">
				<text>{{$t('card.tit4')}}</text>
				<text>（{{user.user?.recharge_all}}/{{data.recharge_total}}）</text>
			</view>
			<view class="cardbox-jdt mb20">
				<view class="cardbox-jdt-mt"
					:style="'width:'+(user.user?.recharge_day/data.recharge_day * 100 > 100 ? 100 : user.user?.recharge_day/data.recharge_day)+'%'">
				</view>
			</view>
			<view class="f28 mb30 bj_between">
				<view class="bj_left">
					<text style="margin-right: 78rpx;">{{$t('card.tit5')}}</text>
					<text>{{$t('card.tit6')}}</text>
				</view>
				<text>（{{user.user?.recharge_day}}/{{data.recharge_day}}）</text>
			</view>
			<view class="f28 mb20">
				{{$t('card.tit7')}}
			</view>
			<view class="f22 c9c" v-html="t('card.txt1')"></view>
		</view>
		<zero-loading type="surround" v-if="loading"></zero-loading>
		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let user = ref({})
	let data = ref({
		recharge_day: "",
		recharge_total: "",
		times: 0
	})

	let klist = ref([{
			k: "k1",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k2",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k2",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k1",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k2",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k2",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k1",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k1",
			ifop: false,
			num: 0,
			ifend: 1
		},
		{
			k: "k1",
			ifop: false,
			num: 0,
			ifend: 1
		}
	])
	// 加载
	const loading=ref(false)

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	onShow(function() {
		loading.value=true
		common.cardGameInit().then(res => {
			data.value = res.data.data
			user.value = getApp().globalData.userInfo
			for (var i = 0; i < klist.value.length; i++) {
				if (data.value.times > i) {
					klist.value[i].ifop = true
				}
			}
			loading.value=false
		})
	})

	// 翻牌
	function fp(v) {
		if (v.ifop) {
			v.ifend = 2
			setTimeout(() => {
				v.ifend = 3
				// 翻牌-接口报错
				common.cardGameBegin().then(res => {
					v.num = res.data?.data?.money || 0
				})
			}, 1000)
		}
	}
</script>

<style scoped lang="scss">
	.cardbox {
		padding: 80rpx 40rpx;

		&-jdt {
			height: 20rpx;
			background: #000000;
			border-radius: 100rpx;
			position: relative;

			&-mt {
				position: absolute;
				height: 20rpx;
				border-radius: 100rpx;
				left: 0;
				top: 0;
				background: linear-gradient(180deg, #4BB0E8 0%, #1768D9 100%);
			}
		}

		&-main {
			padding: 0 60rpx;

			&-tag {
				width: 96rpx;
				position: absolute;
				right: -76rpx;
				top: -34rpx;
			}

			&-item {
				width: 124rpx;
				height: 176rpx;
				margin-right: 80rpx;
				margin-bottom: 40rpx;
			}

			&-item:nth-child(3n+3) {
				margin-right: 0;
			}

			&-op6 {
				opacity: 0.6;
			}


			&-win {
				position: relative;

				&-box {
					display: flex;
					flex-wrap: wrap;
				}

				&-img {
					width: 100%;
					height: 100%;
				}

				&-txt {
					width: 100%;
					position: absolute;
					left: 0;
					top: 110rpx;
					color: #fff;
					font-size: 20rpx;
					font-weight: bold;
					text-align: center;
				}
			}
		}
	}
</style>